<template>
    <div class="product-picker" id="productPicker">
        <table class="table" v-if="products">
            <thead>
                <th class="col-xs-1 text-center"><input type="checkbox" v-model="currentCheckAll"></th>
                <th class="col-xs-2 text-center">编号</th>
                <th class="col-xs-5">商品名称</th>
                <th class="col-xs-2 text-right">原价</th>
                <th class="col-xs-2 text-right">现价</th>
            </thead>
            <tbody>
                <tr v-for="(product, index) in products">
                    <th class="text-center"><input type="checkbox" name="" :value="product.id" v-model="selectedIds"></th>
                    <td class="text-center">{{product.id}}</td>
                    <td>{{product.title}}</td>
                    <td class="text-right">{{product.price}}</td>
                    <td class="text-right">{{product.msrp}}</td>
                </tr>
            </tbody>
        </table>
        <nav aria-label="...">
            <ul class="pager">
                <li v-bind:class="['previous', currentPage <= 1 ? 'disabled' : '']">
                    <a href="javascript:void(0)" @click="changePage('prev')">
                        <span aria-hidden="true">&larr;</span>
                        上一页
                    </a>
                </li>
                <li v-bind:class="['next', currentPage >= totalPage ? 'disabled' : '']">
                    <a href="javascript:void(0)" @click="changePage('next')">
                        下一页
                        <span aria-hidden="true">&rarr;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
import Query from '../query'
import SuccessDialog from 'success_alert'
import ErrorDialog from 'error_alert'

export default {
    name: "productPicker",

    props: {
      itemId: {
        type: Number,
        required: true
      },
      customFun: {
        type: Function
      }
    },

    data: function data() {
        return {
            products: [],
            selectedIds: [],
            currentPage: 1,
            totalPage: 0,
        }
    },
    created: function created(){
        this.queryData()
        if (this.itemId != 0 && this.customFun) {
          this.customFun.call(this, this.itemId)
        }
    },
    mounted: function mounted(){
    },
    computed: {
        arrSelectedIds: {
            get: function() {
                return this.selectedIds.map((item) => {
                    return item
                })
            }
        },
        currentAllIds: {
            get: function() {
                if (this.products.length > 0) {
                    return this.products.map((item) => {return item.id}).sort()
                } else {
                    return []
                }
            }
        },
        currentCheckAll: {
            get: function() {

                let arr = this.selectedIds.filter((item) => {
                    return this.currentAllIds.indexOf(item) != -1
                })

                return arr.length === this.currentAllIds.length
            },
            set: function(value) {
                if (value) {
                    let newIds = this.currentAllIds.filter((item) => {
                        return this.selectedIds.indexOf(item) === -1
                    })
                    this.selectedIds = this.selectedIds.concat(newIds)
                } else {
                    this.currentAllIds.map((item) => {
                        if(this.selectedIds.indexOf(item) != 1)
                        this.selectedIds.splice(this.selectedIds.indexOf(item), 1)
                    })
                }
            }
        }
    },
    watch: {
        // 监控已选择的选中的ids
        selectedIds: function(val, oldVal){
            console.log('已监控赋值');
            $('#hidden_product_ids').val(this.arrSelectedIds)
        }
    },
    methods: {
        // 初始化拉取数据products
        queryData: function() {
            var _this = this
            Query.get('/admin/products/get_data', {
                params: {
                    page: _this.currentPage
                }
            }).then((data) => {
                if (data.status === 'ok') {
                    _this.products = data.products.result
                    _this.totalPage = data.products.total_pages
                } else {
                    ErrorDialog.show(data.msg)
                }

            }).catch((error) => {
                console.log(error)
            })
        },

        // 前后切换
        changePage: function(state) {
            if (state === 'next' && this.currentPage < this.totalPage) {
                this.currentPage += 1
                this.queryData()
            } else if (state === 'prev' && this.currentPage > 1) {
                this.currentPage -= 1
                this.queryData()
            }
        },
    },
}
</script>

<style lang="less" scoped>

</style>
